<template lang="html">
  <transition name="warn">
    <div class="jr-warn" ref="warnMask" v-if="showWarn">
      <div class="warn-wrap" v-text="warnInfo"></div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
export default {
  props: {
    warnInfo: {
      type: String,
      default: '未知错误, 请联系客服！'
    },
    delayime: {
      type: Number,
      default: 1000
    },
    showWarn: {
      type: Boolean,
      default: false
    },

  },
  data () {
    return {

    }
  },
  mounted () {
//    this.$nextTick(() => {
//      console.log('召唤')
//      if(this.showWarn){
//        setTimeout(() => {
//          console.log('出现吧 神龙')
//          this.showWarn = false
//        }, this.delayime)
//      }
//    })
  },
  methods: {
    hideRule: function () {
      // 禁止滚动穿透
//      this.$refs.rulesMask.addEventListener('touchmove', function(e) {
//        e.preventDefault();
//      }, false);
//      this.$root.eventHub.$emit('isWarnFun', false);

    }
  },
  computed: {
    isHideRule: function () {
      return this.isWarn
    },
    isShowWran() {
      setTimeout(() => {
        console.log('出现吧 神龙')
        this.showWarn = false
      }, this.delayime)
    }
  },
  watch: {
    showWarn (val,oldval) {
      if(val){
        setTimeout(() => {
          this.$root.eventHub.$emit('showWarnFu', false);
        }, this.delayime)
      }

    }
  },
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import '../common/style/base.styl'

  .jr-warn
    width rem(400)
    height rem(100)
    padding rem(30)
    position fixed
    left 50%
    top 50%
    z-index 9999
    border-radius rem(15)
    -webkit-border-radius rem(15)
    -webkit-transform translate3d(-50%,-50%,0)
    transform translate3d(-50%,-50%,0)
    background-color #ec4d35
    .warn-wrap
      height 100%
      width 100%
      text-align center
      font-weight bold
      font-size rem(32)
      line-height rem(100)
      color  #ffea97

  .warn-enter-active, .warn-leave-active {
    opacity: 1
    transition: opacity .3s
    -webkit-transition: opacity .3s
  }
  .warn-enter, .warn-leave-active {
    opacity: 0.1
  }

</style>
